<template>
  <div class="common-page-container">
    <a-card :bordered="false" class="common-content-card">
      <!-- 搜索表单 -->
      <SearchForm 
        :query-params="queryParams"
        v-model:dateRange="dateRange"
      />
      
      <!-- 操作按钮 -->
      <TableOperations
        :selected-count="selectedRowKeys.length"
        :before-upload="beforeUpload"
        @batch-delete="handleBatchDelete"
        @refresh="fetchFileList"
        @search="handleSearch"
        @reset="resetQuery"
      />
      
      <!-- 表格视图 -->
      <FileTable
        :columns="useFileTableColumns().value"
        :loading="loading"
        :data="fileList"
        :pagination="pagination"
        :selected-row-keys="selectedRowKeys"
        :is-image-file="isImageFile"
        :is-document-file="isDocumentFile"
        :is-video-file="isVideoFile"
        :is-audio-file="isAudioFile"
        :is-previewable="isPreviewable"
        :format-file-size="formatFileSize"
        :format-date="formatDate"
        @selection-change="onSelectChange"
        @table-change="handleTableChange"
        @preview="handlePreview"
        @download="handleDownload"
        @copy-link="handleCopyLink"
        @delete="handleDelete"
      />
      
      <!-- 加载出错或无数据时显示重试按钮 -->
      <Empty
        :loading="loading"
        :load-error="loadError"
        :error-message="errorMessage"
        :data-list="fileList"
        empty-text-key="file.emptyData"
        @retry="fetchFileList"
      />
    </a-card>

    <!-- 预览模态框 -->
    <PreviewModal
      v-model:open="previewVisible"
      :file="previewFile"
      :is-image-file="isImageFile"
      :is-pdf-file="isPdfFile"
      :is-video-file="isVideoFile"
      :is-audio-file="isAudioFile"
      :format-file-size="formatFileSize"
      @download="handleDownload"
    />
  </div>
</template>

<script lang="ts" setup>
import { useFileTableColumns } from './config/tableColumns'
import SearchForm from './components/SearchForm.vue'
import TableOperations from './components/TableOperations.vue'
import FileTable from './components/FileTable.vue'
import PreviewModal from './components/PreviewModal.vue'
import Empty from '@/components/common/Empty.vue'
import useFileManagement from './hooks/useFileManagement'

defineOptions({
  name: 'FileManagement'
})

// 使用文件管理钩子
const {
  // 状态
  loading,
  loadError,
  errorMessage,
  fileList,
  selectedRowKeys,
  dateRange,
  previewVisible,
  previewFile,
  queryParams,
  pagination,

  // 表格交互方法
  onSelectChange,
  handleTableChange,

  // 搜索区域方法
  handleSearch,
  resetQuery,

  // 数据操作方法
  fetchFileList,
  beforeUpload,
  handleDelete,
  handleBatchDelete,
  handleDownload,
  handleCopyLink,

  // 预览操作方法
  handlePreview,

  // 文件类型检测方法
  isImageFile,
  isDocumentFile,
  isPdfFile,
  isVideoFile,
  isAudioFile,
  isPreviewable,

  // 辅助方法
  formatFileSize,
  formatDate
} = useFileManagement()
</script>

<style lang="scss" scoped>

</style> 